<template>
  <view class="flex-col page">
    <view class="flex-col section">
      <view class="flex-row justify-between self-stretch">
        <view style="width: 56rpx; height: 56rpx" @click="backToHome">
          <image class="full-height full-width" src="@/static/common/back.png"></image>
        </view>
      </view>
      <image class="self-center image_4 mt-95" src="@/static/common/i-label.png" />
    </view>
    <view class="mt-12 flex-col group">
      <text class="self-center text_2">MINIflix Video</text>
      <text class="self-center text_3">{{ $t('login.common.backstagemanagementsystem') }}</text>
      <view class="flex-col self-stretch group_2">
        <view class="flex-row justify-between">
          <text class="font text_4" v-if="logType === 'Password login'">{{ $t('login.common.loginByPwd') }}</text>
          <text class="font text_4"
            v-if="logType === 'Verification code login'">{{ $t('login.common.loginByCode') }}</text>
          <text class="font text_5" v-if="logType === 'Password login'"
            @click="changeLogType('Verification code login')">{{ $t('login.common.loginByCode') }}</text>
          <text class="font text_5" v-if="logType === 'Verification code login'"
            @click="changeLogType('Password login')">{{ $t('login.common.loginByPwd') }}</text>
        </view>
        <view class="mt-10 flex-col">
          <view class="flex-row items-center section_2">
            <text class="font text_6">{{ $t('login.common.email') }}</text>
            <view class="section_3 ml-15"></view>
            <u-input class="text_7 ml-14" :placeholder="$t('login.common.emailAddress')"
              v-model="logInfo.email"></u-input>
          </view>
          <view class="mt-12 flex-row justify-between section_4 items-center"
            v-if="logType === 'Verification code login'">
            <u-input class="text_7 ml-14 border-unset" :placeholder="$t('login.common.emailCode')"
              v-model="logInfo.digitCode"></u-input>
            <view class="section_3 ml-14"></view>
            <text class="font_2 text_6" @click="sendDigCode"
              v-if="countdown === 0">{{ $t('login.common.sendCode') }}</text>
            <text class="font_2 text_6 ml-12 color" style="margin-right: 10px; color: rgba(170, 170, 170, 1)"
              v-if="countdown != 0">Resend({{ countdown }})</text>
          </view>

          <view class="mt-12 flex-row justify-between section_4" v-else>
            <u-input class="text_7 ml-14 border-unset" :placeholder="$t('login.common.emailPwd')"
              :type="showPassword ? 'text' : 'password'" v-model="logInfo.password"></u-input>
            <view class="flex-col justify-start items-end self-center image-wrapper">
              <image src="@/static/common/eyeClose.png" v-if="!showPassword" style="width: 40rpx; height: 40rpx" @click="() => {
                  showPassword = true;
                }
                "></image>
              <image src="@/static/common/eyeOpen.png" v-else style="width: 40rpx; height: 40rpx" @click="() => {
                  showPassword = false;
                }
                "></image>
            </view>
          </view>
        </view>
      </view>
      <view class="flex-col justify-start items-center self-stretch text-wrapper"
        :class="(logInfo.email && logInfo.digitCode) || (logInfo.email && logInfo.password) ? 'back-special' : ''"
        @click="logInToHome">
        <text class="font_2 text_9">{{ $t('login.common.login') }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { _post } from '@/utils/network.js';
import { logByPassword, sendEmailCode, logByDigitCode } from '@/service/logIn.js';
import Config from "@/utils/config.js";

export default {
  components: {},
  props: {},
  data() {
    return {
      logType: 'Password login',
      showPassword: false,
      logInfo: { email: '', digitCode: '', password: '' },
      countdown: 0,
      timer: null // 存储定时器的引用
    };
  },

  methods: {
    backToHome() {
      uni.navigateTo({
        url: '/pages/firstPage/index'
      });
    },
    changeLogType(type) {
      this.logType = type;
      this.logInfo.digitCode = '';
      this.logInfo.password = '';
    },
    changeShowPassword() {
      this.showPassword = !this.showPassword;
    },
    stopCountdown() {
      clearInterval(this.timer); // 清除定时器
    },

    async sendDigCode() {
      const res = await sendEmailCode({ email: this.logInfo.email });
      console.log(res);
      this.countdown = 60;
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          this.stopCountdown();
        }
      }, 1000);
    },
    async logInToHome() {
      let res = null;
      if (this.logType === 'Password login') {
        res = await logByPassword({
          email: this.logInfo.email,
          pwd: this.logInfo.password
        });
      } else {
        res = await logByDigitCode({
          email: this.logInfo.email,
          code: this.logInfo.digitCode
        });
      }

      if (res.data && res.statusCode == 200) {
        uni.setStorageSync(Config.storage.token, res.data.token);
        uni.showToast({
          title: 'Login Successful',
          icon: 'none'
        });
        uni.switchTab({
          url: '/pages/home/index'
        });
      }
    }
  }
};
</script>

<style scoped lang="scss">
.ml-5 {
  margin-left: 0.31rem;
}

.mt-95 {
  margin-top: 5.94rem;
}

.ml-15 {
  margin-left: 0.94rem;
}

.page {
  padding-bottom: 13.5rem;
  background-color: #0c0423;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;

  .section {
    padding: 1.13rem 1.13rem 1.69rem 1.75rem;
    background-image: url('/static/login/bg-login.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .text {
      color: #ffffff;
      font-size: 0.94rem;
      font-family: PingFang SC;
      line-height: 0.7rem;
    }

    .image {
      width: 1.06rem;
      height: 0.69rem;
    }

    .image_2 {
      width: 0.94rem;
      height: 0.69rem;
    }

    .image_3 {
      width: 1.56rem;
      height: 0.75rem;
    }

    .image_4 {
      border-radius: 1.25rem;
      filter: drop-shadow(0rem 0rem 0.38rem #3640f62b);
      width: 5.5rem;
      height: 5.5rem;
    }
  }

  .group {
    padding-left: 2.19rem;
    padding-right: 1.88rem;

    .text_2 {
      color: #ffffff;
      font-size: 2rem;
      font-family: PingFang SC;
      font-weight: 600;
      line-height: 1.48rem;
    }

    .text_3 {
      margin-top: 1.75rem;
      color: #ffffff;
      font-size: 1.13rem;
      font-family: PingFang SC;
      line-height: 0.83rem;
    }

    .group_2 {
      margin-top: 4.38rem;

      .font {
        font-size: 0.81rem;
        font-family: Alibaba PuHuiTi;
        line-height: 0.83rem;
      }

      .text_4 {
        color: #ffffff;
        line-height: 0.78rem;
      }

      .text_5 {
        color: #ffffff80;
        line-height: 0.78rem;
        text-decoration: underline;
      }

      .section_2 {
        margin-right: 0.38rem;
        padding: 0.5rem 1.25rem;
        background-color: #ffffff;
        border-radius: 0.38rem;

        .text_6 {
          color: #333333;
          line-height: 0.63rem;
        }

        .section_3 {
          background-color: #0000001a;
          width: 0.031rem;
          height: 1.25rem;
        }

        .text_7 {
          line-height: 0.87rem;
          border: unset;
        }
      }

      .section_4 {
        margin-right: 0.38rem;
        padding: 0.5rem 0.75rem;
        background-color: #ffffff;
        border-radius: 0.38rem;

        .text_8 {
          margin-top: 0.25rem;
          line-height: 0.37rem;
        }

        .image-wrapper {
          margin-right: 0.25rem;
          width: 2.25rem;
          border-left: solid 0.031rem #0000001a;

          .image_5 {
            width: 1.25rem;
            height: 1.25rem;
          }
        }
      }
    }

    .text-wrapper {
      margin-right: 0.38rem;
      margin-top: 2rem;
      padding: 1.13rem 0 0.88rem;
      // background-image: linear-gradient(133.9deg, #00f6ff 0%, #8312f2 69.5%, #fb97ad 100%);
      background-color: #777777;
      border-radius: 0.75rem;

      .text_9 {
        color: #ffffff;
        line-height: 0.96rem;
      }
    }

    .font_2 {
      font-size: 1rem;
      font-family: Alibaba PuHuiTi;
      color: #333333;
    }
  }
}

.back-special {
  background-image: linear-gradient(133.9deg, #00f6ff 0%, #8312f2 69.5%, #fb97ad 100%);
}
</style>